<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #bucket{width: 100%;height: 340px;min-height: 340px;border: 1px solid #D5D5D5;border-radius: 3px;box-shadow: 0 0 3px #d5d5d5;}

    /*头部*/
    .bucketHeader{height: 39px;line-height: 39px;color:#636363;border-bottom: 1px solid #ccc;background:#F1F1F1;text-align: center;font-size: 12px;font-weight: bold;}

    /*中部*/
    .bucketContent{position: relative;zoom: 1;height:300px;padding-left: 15px;}
    .bucketContent:after{content: "";clear: both;}
    .listBox{float: left;margin-right: 15px;}
    .bucketFaliaoTotal,
    .bucketTiaojiTotal,
    .bucketCaigouTotal{padding:0;margin:0;font-weight: bold;font-size: 12px;text-align: center;display: block;height: 40px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;cursor: pointer;}
    .bucketFaliaoTotal{color: #70B517;}
    .bucketTiaojiTotal{color: #EA7854;}
    .bucketCaigouTotal{color: #11B4FF;}

    .bucketFaliao,
    .bucketTiaoji,
    .bucketCaigou{height: 220px;background: #DADEE3;border-radius: 5px;position: relative;overflow: hidden;}
    .bucketFaliaoFinish,
    .bucketTiaojiFinish,
    .bucketCaigouFinish{position: absolute;bottom: 0;left: 0;font-size: 12px;text-align: center;cursor: pointer;}
    .bucketFaliaoFinishPercent,
    .bucketTiaojiFinishPercent,
    .bucketCaigouFinishPercent{margin:0;padding:0;display: block;height: 15px;line-height: 15px;position: relative;}

    .bucketFaliaoFinish{background: #70B517;}
    .bucketTiaojiFinish{background: #EA7854;}
    .bucketCaigouFinish{background: #11B4FF;}

    /*底部*/
    .bucketFaliaoPercent,
    .bucketTiaojiPercent,
    .bucketCaigouPercent{padding:0;margin:0;display:block;height: 40px;line-height: 40px;text-align: center;font-size: 12px;color: #9D9D9D;font-weight: lighter;overflow:hidden;text-overflow:ellipsis;cursor: pointer;}
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
  <!--面板-->
  <div id="bucket"></div>

  <script src="list.js"></script>
  <script>
    $(document).ready(function(){
      //调用方式1
      //$("#bucket").bucketList();

      //调用方式2
      $.getJSON("data.json",function(list){
        $("#bucket").bucketList(list);
      })
    })
  </script>
</body>
</html>